<div style="width: 100%;position: relative;">
    <div [ngSwitch]="dialogType">
        <div *ngSwitchCase="TypeOfDialog.Standard">
            <h1 mat-dialog-title style="display:inline-block; cursor:move; padding-top: 15px" mat-dialog-draggable>
                {{'device.tag-property-title' | translate}}
            </h1>
            <mat-icon (click)="onNoClick()" style="float:right;cursor:pointer;color:gray;position: relative; top: 10px; right: 0px">clear</mat-icon>
            <div style="max-height: 540px; overflow-y: auto; overflow-x: hidden;">
                <div style="display: block;">
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                        <span>{{'device.tag-property-device' | translate}}</span>
                        <mat-select [(value)]="data.device.name" style="width: 350px" [disabled]="true">
                            <mat-option *ngFor="let device of devicesValue()" [value]="device.name">
                                {{ device.name }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                        <span>{{'device.tag-property-name' | translate}}</span>
                        <input [(ngModel)]="data.tag.name" style="width: 350px" type="text" (input)="onCheckValue($event)">
                    </div>
                    <div *ngIf="isSiemensS7()">
                        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                            <span>{{'device.tag-property-type' | translate}}</span>
                            <mat-select [(value)]="data.tag.type" style="width: 350px">
                                <mat-option *ngFor="let type of tagType | enumToArray" [value]="type.key">
                                    {{ type.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                            <span>{{'device.tag-property-address' | translate}}</span>
                            <input [(ngModel)]="data.tag.address" style="width: 350px" type="text">
                        </div>
                        <!-- <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                            <span>{{'device.tag-property-min' | translate}}</span>
                            <input numberOnly [(ngModel)]="data.tag.min" style="width: 80px" type="text">
                        </div>
                        <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                            <span>{{'device.tag-property-max' | translate}}</span>
                            <input numberOnly [(ngModel)]="data.tag.max" style="width: 80px" type="text">
                        </div> -->
                    </div>
                    <div *ngIf="isModbus()">
                        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                            <span>{{'device.tag-property-register' | translate}}</span>
                            <mat-select [(value)]="data.tag.memaddress" style="width: 350px" #memaddress (selectionChange)="checkMemAddress(data.tag.memaddress)">
                                <mat-option *ngFor="let type of memAddress | enumToArray" [value]="type.value">
                                    {{ type.key }}
                                </mat-option>
                            </mat-select>
                        </div>                
                        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                            <span>{{'device.tag-property-type' | translate}}</span>
                            <mat-select [(value)]="data.tag.type"
                                        [disabled]="!memaddress.value || memaddress.value === '000000' || memaddress.value === '100000'"
                                        style="width: 350px">
                                <mat-option *ngFor="let type of tagType | enumToArray" [value]="type.key">
                                    {{ type.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                            <span>{{'device.tag-property-address-offset' | translate}}</span>
                            <input numberOnly [(ngModel)]="data.tag.address" style="width: 350px" type="text" [disabled]="!memaddress.value">
                        </div>
                        <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                            <span>{{'device.tag-property-divisor' | translate}}</span>
                            <input numberOnly [(ngModel)]="data.tag.divisor" style="width: 80px" type="text">
                        </div>                        
                        <!-- <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                            <span>{{'device.tag-property-min' | translate}}</span>
                            <input numberOnly [(ngModel)]="data.tag.min" style="width: 80px" type="text">
                        </div>
                        <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                            <span>{{'device.tag-property-max' | translate}}</span>
                            <input numberOnly [(ngModel)]="data.tag.max" style="width: 80px" type="text">
                        </div> -->
                    </div>
                    <div *ngIf="isEthernetIp()">
                        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                            <span>{{'device.tag-property-address-sample' | translate}}</span>
                            <input [(ngModel)]="data.tag.address" style="width: 350px" type="text">
                        </div>
                    </div>
                    <div class="error" *ngIf="error">
                        <span>{{error}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div *ngSwitchCase="TypeOfDialog.Simple">
            <h1 mat-dialog-title style="display:inline-block; cursor:move; padding-top: 15px" mat-dialog-draggable>
                {{'device.tag-property-title' | translate}}
            </h1>
            <mat-icon (click)="onNoClick()" style="float:right;cursor:pointer;color:gray;position: relative; top: 10px; right: 0px">clear</mat-icon>
            <div style="max-height: 540px; overflow: hidden;">
                <div style="display: block;">
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                        <span>{{'device.tag-property-device' | translate}}</span>
                        <mat-select [(value)]="data.device.name" style="width: 550px" [disabled]="true">
                            <mat-option *ngFor="let device of devicesValue()" [value]="device.name">
                                {{ device.name }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                        <span>{{'device.tag-property-obj-name' | translate}}</span>
                        <input [(ngModel)]="data.tag.name" style="width: 550px" type="text" (input)="onCheckValue($event)">
                    </div>
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;" *ngIf="!isInternal() && !isServer()">
                        <span>{{'device.tag-property-path' | translate}}</span>
                        <input [(ngModel)]="data.tag.address" autocomplete="off" style="width: 550px" type="text" (input)="onCheckValue($event)">
                    </div>
                    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;" *ngIf="isServer()">
                        <span>{{'device.tag-property-type' | translate}}</span>
                        <mat-select [(value)]="data.tag.type" style="width: 350px">
                            <mat-option *ngFor="let type of tagType | enumToArray" [value]="type.key">
                                {{ type.value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field" style="float: right;margin-bottom: 10px;" *ngIf="isServer()">
                        <span>{{'device.tag-property-initvalue' | translate}}</span>
                        <input numberOnly [(ngModel)]="data.tag.init" style="width: 150px" type="text">
                    </div>                       
                </div>
                <div class="error" *ngIf="error" style="display: block; color: red;">
                    <span>{{error}}</span>
                </div>
            </div>
        </div>
        <div *ngSwitchCase="TypeOfDialog.Tree">
            <h1 mat-dialog-title style="display:inline-block; cursor:move; padding-top: 15px" mat-dialog-draggable>
                {{'device.browsetag-property-title' | translate}}
            </h1>
            <mat-icon (click)="onNoClick()" style="float:right;cursor:pointer;color:gray;position: relative; top: 10px; right: 0px">clear</mat-icon>
            <div style="overflow-y: auto; overflow-x: hidden;">
                <ngx-treetable #treetable [config]="config" (expand)="queryNext($event)"></ngx-treetable>
            </div>
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button [disabled]="!isValidate()" color="primary" (click)="onOkClick()">{{'dlg.ok' | translate}}</button>
    </div>
</div>